<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;

    }

    div{
      width: 200px;
      height: 100px;
      background-color: red;
      margin: 10px;
      /* 切换盒子模型 */
      box-sizing: content-box;/* 是W3C盒子模型 */
      box-sizing: border-box;/* 是IE盒子模型 */
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>
<!-- 

W3C标准的盒子模型（标准盒模型）：
在这个模型中，width和height属性仅包括内容的尺寸，不包括内边距（padding）、边框（border）和外边距（margin）。
内容区域（content）的实际宽度和高度由width和height属性设置。
内边距（padding）是内容区域与边框之间的空白区域。
边框（border）是包围在内边距和内容外的线条。
外边距（margin）是盒子与其他元素之间的空白区域。

IE标准的盒子模型（怪异盒模型）：
与标准盒模型不同，在这个模型中，width和height属性包括内容、内边距（padding）和边框（border）的总宽度和总高度，但不包括外边距（margin）。
这意味着，如果你设置一个元素的宽度为100像素，在怪异盒模型中，这100像素将包含内容、内边距和边框的宽度。
可以通过设置CSS的box-sizing属性为border-box来使用这个模型，这在需要精确控制元素总尺寸的场景下很有用。
-->